<!-- components/ResponsiveGridLayout.vue -->
<template>
  <div ref="containerRef" class="responsive-grid-container">
    <div class="responsive-grid" :style="gridStyle">
      <slot 
        :items-per-row="itemsPerRow" 
        :current-breakpoint="currentBreakpoint"
        :page-size="pageSize"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useResponsiveLayout, type ResponsiveLayoutConfig } from '../utils/useResponsiveLayout'

interface Props {
  config?: Partial<ResponsiveLayoutConfig>
  rows?: number
  itemMinWidth?: number
  gap?: number
}

const props = withDefaults(defineProps<Props>(), {
  config: () => ({}),
  rows: 3,
  itemMinWidth: 200,
  gap: 16
})

const containerRef = ref<HTMLElement | null>(null)

// 合并配置
const layoutConfig: ResponsiveLayoutConfig = {
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1440,
    xxxl: 1920
  },
  itemsPerRow: {
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5,
    xxl: 5,
    xxxl: 6
  },
  defaultRows: props.rows,
  ...props.config
}

// 使用响应式布局逻辑
const {
  containerWidth,
  currentBreakpoint,
  itemsPerRow,
  calculatePageSize
} = useResponsiveLayout(containerRef, layoutConfig)

// 计算页面大小
const pageSize = computed(() => calculatePageSize(props.rows))

// 网格布局样式
const gridStyle = computed(() => ({
  display: 'grid',
  gridTemplateColumns: `repeat(auto-fill, minmax(${props.itemMinWidth}px, 1fr))`,
  gap: `${props.gap}px`
}))

// 暴露给父组件的属性和方法
defineExpose({
  itemsPerRow,
  currentBreakpoint,
  pageSize,
  containerWidth
})
</script>

<style scoped>
.responsive-grid-container {
  width: 100%;
  height: 100%;
}

.responsive-grid {
  width: 100%;
}
</style>